<h4 class="page-title">留言</h4>
<!--界面-->
<div class="row" style="margin-bottom: 2%">
    <div class="col-md-12">
        <div class="card">
            <div class="row">
                <div class="col-md-3">
                    <div style="margin: 5px;min-height: 465px;border-radius: 5px;border: 1px #ced4da solid">
                        <div style="padding: 5px">
                            <form class="navbar-left navbar-form nav-search mr-md-3" action=""
                                  style="margin-right: 0rem !important;">
                                <div class="input-group" style="border-radius: 5px">
                                    <input id="search" type="text" placeholder="用户名称..."
                                           class="form-control">
                                    <div class="input-group-append">
                                                        <span class="input-group-text">
                                                            <i id="searchBtn" class="la la-search search-icon"></i>
                                                        </span>
                                    </div>
                                </div>
                            </form>
                            <ul id="liHover" class="list-group"
                                style="max-height: 400px;margin-top: 5px;overflow-y: auto">


                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-md-9">
                    <h1 id="dialogueIsNone" style="display: block; margin: 20% 40%;">
                        <img src="assets/img/选择.png" height="100" width="100"/>
                    </h1>
                    <div id="dialogueContent" class="panel panel-primary" style="display: none;">
                        <div style="border-radius: 5px;padding: 10px;border-bottom: 1px #e8e8e8 solid">
                                            <span class="offset-10">
                                                <span id="interlocutors" style="float: right;margin-right: 5%">

                                                </span>
                                            </span>
                        </div>
                        <div id="con"
                             style="height: 300px ;overflow-y: auto;border-bottom: 1px #e8e8e8 solid">
                            <div id="contentMain">

                            </div>
                        </div>
                        <div>
                            <form role="form">
                                <div>
                                                    <textarea id="content" style="height: 100px" class="form-control"
                                                              rows="3">ccc</textarea>
                                    <div class="offset-10">
                                        <div style="margin: 2px">
                                            <button onclick="saveDialogue()" type="button"
                                                    class="btn btn-xs btn-info">发送
                                            </button>
                                            <button onclick="$('#content').val('')" type="button" class="btn btn-xs btn-info">清空
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    var token;
    var userBId;
    $(function () {
        token = sessionStorage.getItem('token');
        let userName = '';
        selectUser(userName)
    });
    function selectUser(userName) {
        $.ajax({
            url: '/oa/t-user/listUserContent?userName='+userName,
            type: "GET",
            dataType: "json",
            headers: {
                token: "" + token
            },
            success: function (data) {
                var data = data.data
                $('#liHover').empty();
                var html = "";
                for (var i = 0; i < data.length; i++) {
                    if (userBId == data[i].id) {
                        selectDialogue(data[i].id,data[i].userName)
                    }
                    html += '<li onclick="selectDialogue(\'' + data[i].id + '\',\'' + data[i].userName + '\')" class="list-group-item" value="' + data[i].id + '">' + data[i].userName + '</li>'
                }
                $('#liHover').append(html)
            }
        })
    }

    function selectDialogue(userId, userName) {
        $('#interlocutors').html(userName);
        userBId = userId
        $('#dialogueIsNone').attr('style', 'display: none');
        $('#dialogueContent').attr('style', 'display: block');
        selectContent();
    }

    function saveDialogue() {
        var content = $('#content').val();
        var param = {
            userBId: userBId,
            dialogueContent: content
        }
        $.ajax({
            url: '/oa/t-dialogue/saveDialogue',
            type: "POST",
            data: JSON.stringify(param),
            dataType: "json",
            headers: {
                token: "" + token
            },
            contentType: 'application/json; charset=UTF-8',
            success: function (data) {
                if (data.code == 200) {
                    selectContent()
                    $('#content').val('');
                } else if (data.code == 401) {
                    window.location.href = 'login.html'
                } else {
                    $.message({
                        message: data.msg,
                        type: 'error'
                    });
                }
            }
        })
    }

    function selectContent() {
        $.ajax({
            url: '/oa/t-dialogue/dialogueList',
            type: "POST",
            data: {userBId: userBId},
            dataType: "json",
            headers: {
                token: "" + token
            },
            success: function (data) {
                if (data.code == 200) {
                    dialogueMessage()
                    var data = data.data
                    var html = "";

                    $('#contentMain').empty();
                    for (var i = data.length - 1; i >= 0; i--) {
                        if (data[i].type == 0) {
                            html += '<div style="padding: 2%;" class="col-md-6">' +
                                '<span style="float: left;padding: 5px;border-radius: 5px;background-color: aqua">' +
                                '<li onclick="deleteContent(\'' + data[i].dialogueId + '\')" style="list-style: none;max-width: 300px" value="' + data[i].dialogueId + '">' + data[i].dialogueContent + '</li>' +
                                '</span>' +
                                '<div style="clear: both"></div>' +
                                '</div>'
                        } else {
                            html += '<div style="padding: 2%;" class="offset-6">' +
                                '<span style="float: right; padding: 5px;border-radius: 5px;background-color: coral;">' +
                                '<li style="list-style: none;max-width: 300px" value="' + data[i].dialogueId + '">' + data[i].dialogueContent + '</li>' +
                                '</span>' +
                                '<div style="clear: both"></div>' +
                                '</div>'
                        }
                    }
                    $('#contentMain').append(html)
                    $('#con').animate({scrollTop: $('#contentMain').height() + 'px'}, 200)
                } else if (data.code == 401) {
                    window.location.href = 'login.html'
                } else {
                    $.message({
                        message: data.msg,
                        type: 'error'
                    });
                }

            }
        })
    }

    function deleteContent(dialogueId) {
        $('#deleteModel').modal('show');
        $('#deleteBtn').unbind('click').on('click', function () {
            $.ajax({
                url: '/oa/t-dialogue/deleteDialogue',
                type: "POST",
                data: {dialogueId: dialogueId},
                dataType: "json",
                headers: {
                    token: "" + token
                },
                success: function (data) {
                    if (data.code == 200) {
                        selectContent();
                        $.message(data.msg);
                        $('#deleteModel').modal('hide')
                    } else if (data.code == 401) {
                        window.location.href = 'login.html'
                    } else {
                        $.message({
                            message: data.msg,
                            type: 'error'
                        });
                    }
                }
            })
        })
    }
    $("#searchBtn").unbind('click').on('click',function () {
        var keyword = $('#search').val();
        selectUser(keyword)
    })
    function dialogueMessage() {
        $.ajax({
            url: '/oa/t-dialogue/dialogueMessage?userId='+sessionStorage.getItem("id"),
            type: "POST",
            dataType: "json",
            headers: {
                token: "" + token
            },
            success: function (data) {
                if (data.code == 200){
                    var data = data.data
                    console.log(data)
                    if (data.length != 0){
                        $('#messageLen').attr('style','display:block')
                        $('#messageLen').html(data.length)
                    }else {
                        $('#messageLen').attr('style','display:none')
                    }
                    $('#dialogueMessage').empty();
                    var html = '';
                    html += '<li>\n' +
                        '          <div class="dropdown-title">你有'+data.length+'条新消息</div>\n' +
                        '       </li>';
                    for (var i = 0; i < data.length; i++) {
                        html += '<li>\n' +
                            '       <div class="notif-center">\n' +
                            '          <a onclick="seeMessage(\''+data[i].userBId+'\')">\n' +
                            '             <div class="notif-icon notif-primary"> <i class="la la-user-plus"></i> </div>\n' +
                            '                <div class="notif-content">\n' +
                            '                   <span class="block">'+data[i].userAId+'</span>\n' +
                            '                   <span class="time">'+data[i].createTime+'</span>\n' +
                            '                </div>\n' +
                            '          </a nc>\n' +
                            '       </div>\n' +
                            '    </li>'
                    }
                    html += '<li>\n' +
                        '       <a class="see-all" href="questions.html"> <strong>查看更多...</strong> <i class="la la-angle-right"></i> </a>\n' +
                        '    </li>'
                    $('#dialogueMessage').append(html)

                }else if (data.code == 401) {
                    window.location.href = 'login.html'
                }else {
                    $.message({
                        message:data.msg,
                        type:'error'
                    });
                }
            }
        })
    }
</script>